<script setup lang="ts">
import Video1 from '../../components/item1/video1.vue'
import VideoItem from '../../components/item1/video2_3.vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/4/img-src.ts'
</script>

<template>
  <div>
    <div class="max-w-[61.45vw] mx-auto text-center">
      <p class="text-[2.625rem] leading-[1.2]">
        实况照片引领者
        <br />
        放大此刻生命力
      </p>
      <p class="text-sm mt-[0.875rem]">
        让照片 Live 起来，Get 当季最潮玩法。高清长焦实况照片、4K
        视频转实况照片、闪光实况照片，有三合一 Live 图神机在手，各种潮流玩法一台 Reno 就够。
      </p>
    </div>

    <div
      class="w-[69vw] grid grid-cols-2 grid-rows-[52.6vw_74.2vw] mx-auto mt-[4.875rem] gap-x-[2.5rem] gap-y-[0.5rem]"
    >
      <div class="grid items-center justify-center">
        <div class="text-3xl">
          <p>高清长焦实况照片</p>
          <p>放大拍实况</p>
          <p>更有生命力</p>
        </div>
      </div>

      <Video1 />
      <VideoItem
        :video-src="getImgSrc('videos-photogtaphy-c1-2-pc.mp4')"
        main-title="人美，景也美"
        subtitle="85mm 黄金焦段，拉近身后的美好，人与景更合拍。"
      />
      <VideoItem
        class="self-end"
        :video-src="getImgSrc('videos-photogtaphy-c1-3-pc.mp4')"
        main-title="抓拍也清晰"
        subtitle="旗舰级双重曝光，定格超清封面，动态纤毫毕现。"
      />
    </div>
  </div>
</template>
